一、项目搭建
注意事项:node>=6 and npm>=5.2
1、npx create-react-app hello-world
2、cd hello-world
3、npm start
二、components与props:
注意事项:1、props属性为只读属性。2、修改双向绑定值,需引入state
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
1、方式一:
注意事项:修改Welcome实例内容,需要重复创建Welcome实例,如setInterval(function(){React.Component(<Welcome name={new Date()} />,RootDOM)},1000)
function Welcome(props){
return (<div>展示数据:{props.name}</div>)
}
2、方式二:
class Welcome extends Component{
constructor(props){
super(props)
}
render(){
return (
<div>
<span>展示数据{this.props.name}</span>
<span>展示数据2</span>
</div>
)
}
}
ReactDOM.render(<Welcome name="wqqq" />, document.getElementById('root'));
三、state与lifecycle:
解析:1、state在constructor中注入对象。2、state中的值通过this.setState()进行修改。方式一【object】:this.setState({propertyName:propertyValue});方式二【function(上次修改的state对象,props){}】。3、此处用React的lifecycle中有:componentDidMount、componentWillUnmount。
class Clock extends React.Component {
constructor(props) {
super(props)
this.state = {
date: new Date(),
secondForm: 0
}
}
tick() {
this.firstFormSetState();
this.secondFormSetState();
}
*新值不依赖旧值或props,计算出新值*
firstFormSetState() {
this.setState({
date: new Date()
})
}
*new value reply on old value or props*
secondFormSetState() {
this.setState((lastState, props) => {
return ({secondForm: lastState.secondForm + 1})
})
}
componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerID)
}
render() {
return (
<div>
<div>this is {this.state.date.toLocaleTimeString()}.</div>
<div>second form of setState{this.state.secondForm}</div>
</div>
)
}
}
ReactDOM.render(<Clock/>, document.getElementById('root'));
四、事件绑定
总结:1、改变this指向方法:bind()方法【this.handleClick=this.handleClick.bind(this);
,或者<button onClick={this.handleClick.bind(this,'21')}>测试</button>
}】、或者定义函数时使用arrow function【handleClick=()=>{}
】。2、阻止默认行为,必须使用event.preventDefault()
class EventConstants1 extends React.Component{
constructor(props){
super(props);
this.state={
isToggleOn:true
};
// This binding is necessary to make `this` work in the callback
// this.handleClick=this.handleClick.bind(this);
}
actionClick(e){
e.preventDefault();
}
handleClick(...params){
console.log(params);
this.setState(()=>({
isToggleOn:!this.state.isToggleOn
}))
}
render(){
return (
<div>
<a href="http://192.168.0.242:80" onClick={this.actionClick}>Click me to explain event.preventDefault()</a>
<button onClick={this.handleClick.bind(this,'21')}>{this.state.isToggleOn?'YES':'NO'}</button>
</div>
)
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。